class Project {
    constructor() {
        this.name = document.getElementById('goodsName');
        this.price = document.getElementById('goodsPrice');
        this.num = document.getElementById('goodsNum');
        this.cont = document.querySelector('.cont');
        this.send = document.getElementById('send');
        this.add = document.getElementById('add');
        this.deleteCon = document.getElementById('deleteCon');

        this.left = document.querySelector('.leftBtn');
        this.right = document.querySelector('.rightBtn');
        this.numP = 8;
        this.index = 0;

        this.goodsId1 = document.querySelector('.goods-id');
        // console.log(this.goodsId1);
        this.goodsName1 = document.querySelector('.goods-name');
        // console.log(this.goodsName1);
        this.goodsNum1 = document.querySelector('.goods-num');
        // console.log(this.goodsNum1);
        this.goodsPrice1 = document.querySelector('.goods-price');
        // console.log(this.goodsPrice1);



        this.insertUrl = 'http://localhost/2003/project/api/insert.php';
        this.selectUrl = 'http://localhost/2003/project/api/select.php';
        this.updateUrl = 'http://localhost/2003/project/api/update.php';
        this.deleteUrl = 'http://localhost/2003/project/api/delete.php';

        this.type = '默认值';
        this.addEvent();
        this.selectLoad();

        this.onoff = true;


    }

    addEvent() {
        let that = this;
        // 提交按钮
        this.send.addEventListener('click', function () {
            // 正则验证
            that.nV = /^[\u2E80-\u9FFF]+$/;
            if (that.nV.test(that.name.value)) {
                that.nV = that.name.value;
            } else {
                alert("验证失败");
            }
            let reg = /^[1-9]\d{3}|[1-9]\d|0\.?\d{2}$/;
            if (reg.test(parseFloat(that.price.value))) {
                that.pV = that.price.value;
            } else {
                alert("请输入正确价格格式,如：123.23");
            }


            that.numV = /^[1-9]{1,50}$/;
            if (that.numV.test(that.num.value)) {
                that.numV = that.num.value;
                console.log(typeof that.numV);
                console.log(111);
            } else {
                alert("数量验证失败");
            }
            // 点击提交按钮，发送数据
            if (that.type === 1) {
                that.insertLoad();
            } else {
                that.updateLoad();
            }
        });
        // 添加按钮
        this.add.addEventListener('click', function () {
            that.type = 1;
        });
        //修改按钮
        this.cont.addEventListener("click", function (eve) {
            let e = eve || window.event;
            let tar = e.target || e.srcElement;
            if (tar.title === "changeCont") {
                that.type = 2;
                // 获取当前id
                that.id = tar.getAttribute("index");
                // 获取当前所在tr
                that.trNow = tar.parentNode.parentNode;
            }
            // 删除按钮
            if (tar.className.indexOf('del') !== -1) {
                that.id = tar.getAttribute('index');
                that.trNow = tar.parentNode.parentNode;
                that.deleteCon.addEventListener('click', function () {
                    that.deleteLoad();
                });
            }
        });
        //排序 
        this.goodsId1.onclick = function () {
            if (that.onoff) {
                that.sort("id");
                // console.log(that.bool)
                that.onoff = false;
            } else {
                that.sort1("id")
                that.onoff=true;
            }
        }
        this.goodsName1.onclick = function () {
            that.nameSort();
        }
        this.goodsPrice1.onclick = function () {
            if (that.onoff) {
                that.sort("gp");
                that.onoff = false;
            } else {
                that.sort1("gp")
                that.onoff=true;
            }
        }
        this.goodsNum1.onclick = function () {
            that.sort("gm");
            if (that.onoff) {
                that.sort("gm");
                that.onoff = false;
            } else {
                that.sort1("gm")
                that.onoff=true;
            }
        }
    }
    sort(col) {
        ajaxGet(this.selectUrl, (res) => {
            this.res = JSON.parse(res);
            // console.log(this.res);
        })
        for (var i = 0; i < this.res.msg.length - 1; i++) {
            // 内层循环控制列：决定每轮比较几次
            for (var j = 0; j < this.res.msg.length - 1 - i; j++) {
                // console.log(111);
                // 将当前位置和后一位比较
                if (Number(this.res.msg[j][col]) < Number(this.res.msg[j + 1][col])) {

                    // 交换
                    var ls = this.res.msg[j];
                    this.res.msg[j] = this.res.msg[j + 1];
                    this.res.msg[j + 1] = ls;
                }
            }
        }
        this.display();
    }
    sort1(col) {
        console.log(this.onoff);
        ajaxGet(this.selectUrl, (res) => {
            this.res = JSON.parse(res);
            // console.log(this.res);
        })
        for (var i = 0; i < this.res.msg.length - 1; i++) {
            // 内层循环控制列：决定每轮比较几次
            for (var j = 0; j < this.res.msg.length - 1 - i; j++) {
                // console.log(111);
                // 将当前位置和后一位比较
                if (Number(this.res.msg[j][col]) > Number(this.res.msg[j + 1][col])) {
                    // 交换
                    var ls = this.res.msg[j];
                    this.res.msg[j] = this.res.msg[j + 1];
                    this.res.msg[j + 1] = ls;
                }
            }
        }
        this.display();
    }
    nameSort() {
        ajaxGet(this.selectUrl, (res) => {
            this.res = JSON.parse(res);
        })
        for (var i = 0; i < this.res.msg.length - 1; i++) {
            // 内层循环控制列：决定每轮比较几次
            for (var j = 0; j < this.res.msg.length - 1 - i; j++) {
                // 将当前位置和后一位比较
                if (this.res.msg[j].gn > this.res.msg[j + 1].gn) {
                    // 交换
                    var ls = this.res.msg[j];
                    this.res.msg[j] = this.res.msg[j + 1];
                    this.res.msg[j + 1] = ls;
                }
            }
        }
        this.display();
    }
    insertLoad() {
        ajaxPost(this.insertUrl, (res) => {
            this.res = JSON.parse(res);
            if (this.res.code === 2) {
                this.display();
            } else {
                alert(this.res.msg);
            }
        }, {
            name: this.nV,
            price: this.pV,
            num: this.numV
        });
    }
    display() {
        let str = '';
        for (let i = this.index * this.numP; i < this.index * this.numP + this.numP; i++) {
            if (i < this.res.msg.length) {
                str += `<tr>
                        <td>${this.res.msg[i].id}</td>
                        <td>${this.res.msg[i].gn}</td>
                        <td>${this.res.msg[i].gp}</td>
                        <td>${this.res.msg[i].gm}</td>
                        <td><button type="button" class="btn btn-danger del" data-toggle="modal" data-target="#delete"  index="${this.res.msg[i].id}">删除</button></td>
                        <td><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat" title="changeCont" index="${this.res.msg[i].id}">修改</button></td>
                </tr>`
            }
        }
        this.cont.innerHTML = str;
        this.pageAddEvent();
    }
    pageAddEvent() {
        this.pageNum = Math.ceil(this.res.msg.length / this.numP);
        let that = this;
        this.left.onclick = function () {
            if (that.index === 0) {
                that.index = that.pageNum - 1;
            } else {
                that.index--;
            }
            that.display();
        }
        this.right.onclick = function () {
            if (that.index === that.pageNum - 1) {
                that.index = 0;
            } else {
                that.index++;
            }
            that.display();
        }
    }
    selectLoad() {
        ajaxGet(this.selectUrl, (res) => {
            this.res = JSON.parse(res);
            if (this.res.code === 2) {
                this.display();
            } else {
                alert(this.res.msg);
            }
        });
    }
    updateLoad() {
        ajaxPost(this.updateUrl, (res) => {
            this.res = JSON.parse(res);
            if (this.res.code === 2) {
                this.trNow.children[1].innerHTML = this.nV;
                this.trNow.children[2].innerHTML = this.pV;
                this.trNow.children[3].innerHTML = this.numV;
            } else {
                alert(this.res.msg);
            }
        }, {
            id: this.id,
            goodsName: this.nV,
            goodsPrice: this.pV,
            goodsNum: this.numV
        });
    }
    deleteLoad() {
        console.log(this.id);
        ajaxPost(this.deleteUrl, (res) => {
            this.res = JSON.parse(res);
            if (this.res.code === 2) {
                this.trNow.remove();
            } else {
                alert(this.res.msg);
            }
        }, {
            id: this.id
        });
    }
}
new Project();